<template>
  <div class="search">
    <div class="search-title">
      <el-input v-model="songname" placeholder="请输入内容"></el-input>
      <button type="button" @click="searchHandler" name="button">搜索</button>
    </div>
    <ul>
      <li v-for="(item,index) in songlist" :key="index" v-text="item.songname"></li>
    </ul>

  </div>
</template>

<script>
export default {
  name:"search",
  data(){
    return{
      songname:"",
      songlist:[]
    }
  },
  methods:{
    searchHandler(){
      console.log(this.songname)
      this.$axios.get("/api/adminup/searchMusic",{
        params:{
          songname:this.songname
        }
      }).then(res =>{
        this.songlist = res.data.data
        console.log(res)
      })

    },

  }
}
</script>

<style scoped>

.search-title{
  padding: 20px;
  overflow: hidden;
  clear: both;
}

input{
  width: 80%;
  height: 30px;
  line-height: 30px;
  background: #fff;
  border: 1px solid #f1f2f3;
  padding-left: 10px;
  float: left;
  display: inline-block;
}

button{
  float: left;
  width: 15%;
  height: 30px;
}

.list {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  word-break: break-all;
  border-bottom: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
}

.list li.song {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  min-height: 55px;
  text-align: left;
}

li{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 50px;
  border-bottom: 1px solid #F2F2F2;
  padding-left: 10px;
}

.list .item.song .left, .list li.song .left {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list .item .info, .list li .info {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list li .info>span {
  font-weight: 400;
  display: block;
  font-size: 12px;
  color: #999;
}

</style>